<template>
  <div class="dashborad">
    <div class="top">
      <el-card class="box-card">
        <div class="top">
          <div class="topLeft">
            <img src="@/assets/common/11.jpg" alt="">
          </div>
          <div class="topRight">
            <div class="TRtop">{{ $t('navbar.title') }}</div>
            <!-- <div class="TRtop">下午好，我们是优秀的前端85期</div> -->
            <div class="TRbottom">双12快乐，给我买些礼物吧</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="bottom">
      <!-- 下面的部分，分为左右两个部分，使用el-row el-col进行布局 -->
      <el-row>
        <el-col :span="14">
          <div style="padding-right: 30px">
            <el-card class="box-card">
              <div>
                <el-calendar>
                  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                  <template
                    slot="dateCell"
                    slot-scope="{date, data}"
                  >
                    <!-- <p :click="btnClick(data)">1</p> -->
                    <div class="isRest">
                      <span>{{ getCurremtDate(data.day) }}</span>
                      <span v-if="isWeekend(date)" class="rest">休</span>
                    </div>

                    <!-- <p :class="data.isSelected ? 'is-selected' : ''">
                      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
                    </p> -->
                  </template>
                </el-calendar>
              </div>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
              </div>
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="10">
          <el-card class="box-card">
            <div>
              1111
            </div>
          </el-card>
          <el-card class="box-card">
            <div>
              <radix />
            </div>
          </el-card>
          <el-card class="box-card">
            <div>
              <span>123</span>
              <span>456</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import radix from './radix.vue'

export default {
  name: '',
  components: {
    radix
  },
  data() {
    return {}
  },
  methods: {
    // btnClick(data) {
    //   console.log(data)
    // }
    getCurremtDate(date) {
      // console.log(date)
      const currentDateStr = date.slice(8)
      return currentDateStr.startsWith('0') ? currentDateStr.slice(1) : currentDateStr
    },
    isWeekend(data) {
      // console.log(111, data)
      const currentDay = data.getDay()
      if (currentDay === 0 || currentDay === 6) {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashborad {
  margin: 15px;
  .top {
    display: block;
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    .box-card{
      width: 100%;
      display: flex;
       .topLeft{
          display: block;
          padding: 20px;

          img{
            display: block;
            width: 100px;
            border-radius: 50px;
            overflow: hidden;
          }
    }
    .topRight{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .TRtop{
        font-size: 24px;
      }
      .TRbottom{
        font-size: 14px;
        color: #9e9898;
      }
    }
    }
  }
  .el-card {
    margin-bottom: 15px;
  }
}
.isRest{
  display: flex;
  justify-content: space-around;
  .rest{
    display: block;
    width: 20px;
    border-radius: 10px;
    background-color: aqua;
  }
}
</style>
